<template>
  <el-main>
    <div class="margin-bottom-20">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '' }">角色管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色授权</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="clearfix">
      <el-form class="pull-left" inline>
        <el-form-item>
          <el-input
            placeholder="请输入权限名称"
            v-model="search_param.ruleName"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入权限码"
            v-model="search_param.ruleCode"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button
              @click="handleSearch"
              icon="el-icon-search"
              size="medium"
              type="primary"
              >搜索
            </el-button>
            <el-button @click="handleReset" size="medium" type="primary"
              >重置
            </el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>
    <el-card class="box-card" shadow="never">
      <h4
        class="margin-bottom-20"
        style="border-left: 3px solid #00a7cd;padding-left: 8px;"
      >
        角色名称：
      </h4>
      <div class="margin-bottom-20" style="margin-left: 20px">
        {{ groupInfo.groupName }}
      </div>

      <h4
        class="margin-bottom-20"
        style="border-left: 3px solid #00a7cd;padding-left: 8px;"
      >
        权限列表：
      </h4>
      <el-table
        :data="table_data"
        :row-class-name="tableRowClassName"
        style="width: 100%"
      >
        <el-table-column
          label="权限名称"
          prop="ruleName"
          show-overflow-tooltip
        />
        <el-table-column label="权限码" prop="ruleCode" show-overflow-tooltip />
        <el-table-column
          label="权限类型"
          prop="ruleTypeDesc"
          show-overflow-tooltip
        />
        <el-table-column
          label="权限条件"
          prop="ruleCondition"
          show-overflow-tooltip
        />
        <el-table-column label="创建时间" prop="ctime" width="160" />
        <el-table-column label="修改时间" prop="utime" width="160" />
        <el-table-column label="备注" prop="remark" show-overflow-tooltip />
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click="handleUnGrant(scope.row)"
              size="mini"
              style="color: red"
              type="text"
              v-if="scope.row.is_grant"
              >取消授权
            </el-button>
            <el-button
              @click="handleGrant(scope.row)"
              size="mini"
              type="text"
              v-else
              >授权
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="margin-top-10 clearfix">
        <el-pagination
          :current-page.sync="current_page"
          :page-size.sync="page_size"
          :page-sizes="[5, 10, 20]"
          :total="total_size"
          @current-change="load_table_data"
          @size-change="load_table_data"
          background
          class="pull-right"
          layout="total, sizes,  prev, pager, next"
        />
      </div>
    </el-card>
  </el-main>
</template>

<script>
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      id: null,
      groupInfo: { groupName: null }
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.info();
    this.handleSearch();
  },
  computed: {
    ...mapState("auth_rule", ["total_size", "table_data"]),
    page_size: {
      get() {
        return this.$store.state.auth_rule.page_size;
      },
      set(value) {
        this.set_page_size(value);
      }
    },
    current_page: {
      get() {
        return this.$store.state.auth_rule.current_page;
      },
      set(value) {
        this.set_current_page(value);
      }
    },
    search_param: {
      get() {
        return this.$store.state.auth_rule.search_param;
      }
    }
  },
  methods: {
    ...mapActions("auth_rule", [
      "load_table_data",
      "set_page_size",
      "set_current_page",
      "set_search_param"
    ]),
    handleSearch() {
      this.set_search_param(
        Object.assign({ groupId: this.id }, this.search_param)
      );
      this.load_table_data();
    },
    handleReset() {
      this.set_search_param({ groupId: this.id });
      this.load_table_data();
    },
    handleGrant(row) {
      let loadingInstance = this.$loading({ fullscreen: true });
      this.$ajax.auth_group
        .grant({
          groupId: this.id,
          ruleId: row.id
        })
        .then(result => {
          if (result.code != 1) {
            this.$message({
              message: result.msg,
              type: "warning"
            });
          } else {
            this.$message({
              type: "success",
              message: "授权成功!"
            });
            this.load_table_data();
          }
        })
        .catch(e => {
          console.log(e);
          this.$message({
            message: "系统繁忙，请稍后重试",
            type: "warning"
          });
        })
        .finally(function() {
          loadingInstance.close();
        });
    },
    handleUnGrant(row) {
      let loadingInstance = this.$loading({ fullscreen: true });
      this.$ajax.auth_group
        .ungrant({
          groupId: this.id,
          ruleId: row.id
        })
        .then(result => {
          if (result.code != 1) {
            this.$message({
              message: result.msg,
              type: "warning"
            });
          } else {
            this.$message({
              type: "success",
              message: "取消授权成功!"
            });
            this.load_table_data();
          }
        })
        .catch(e => {
          console.log(e);
          this.$message({
            message: "系统繁忙，请稍后重试",
            type: "warning"
          });
        })
        .finally(function() {
          loadingInstance.close();
        });
    },
    info() {
      this.$ajax.auth_group
        .info(this.id)
        .then(result => {
          if (result.code != 1) {
            this.$message({
              message: result.msg,
              type: "warning"
            });
            this.$router.push("/auth/group");
          } else {
            this.groupInfo = result.data;
          }
        })
        .catch(e => {
          console.log(e);
          this.$message({
            message: "系统繁忙，请稍后重试",
            type: "warning"
          });
        });
    },
    tableRowClassName({ row }) {
      console.log(row);
      if (row.is_grant) {
        return "warning-row";
      }

      return "";
    }
  }
};
</script>
